// 1- 使用 lazy Suspense
import React,{lazy,Suspense} from "react";
import {Navigate,Outlet} from "react-router-dom";
import {useRoutes} from "react-router-dom";

// 引入Loading
import Loading from "@/commponents/Loading";
// 引入拦截器
import AuthComponent from "@/commponents/AuthComponent";
import Idenx from "../pages/Index";
// 2- 通过lazy引入组件
const lazyLoading = function(path: string){
    const Com = lazy(()=>import("@/pages/" + path));
    return (
        <Suspense fallback={<Loading/>}>
            <Com></Com>
        </Suspense>
    )
}
export default function(){
    const renderRouter = useRoutes([
        {
            path: "/",
            element:(
                // 使用拦截
                <AuthComponent>
                    {lazyLoading("Index")}
                </AuthComponent>
            ),
            // 增加主页详情路由
            children:[
                {
                    index:true,
                    element:lazyLoading("Home")
                },{
                    path:"/cmn",
                    element:<Outlet/>,
                    children :[
                        {
                            index:true,
                            element:<Navigate to={"dict"}/>
                        },{
                            path:"dict",
                            element:lazyLoading ("cmn/dict")
                        }
                    ]
                }
            ]          
        },{
            path: "/login",
            element:lazyLoading("Login")
        },{
            path: "*",
            element:lazyLoading ("NotFound")
        }
    ])
    return renderRouter;
}